<template>
	<view class="pg">
		<u-toast ref="uToast1"></u-toast>
		<view class="title">
			<view class="order_text" v-if="orderList.status==0">订单未支付</view>
			<view class="order_text" v-if="orderList.status==2">订单已完成</view>
			<view class="order_text" v-if="orderList.status==1">待出餐</view>
			<view class="pay">
				<button size="default"
					style="width: 90px;font-size: 14px;height: 100%;line-height: 35px;"
					hover-class="is-hover" type="error" v-if="orderList.status==0" @tap="$u.throttle(toCancel, 500)">取消订单</button>
				<button size="default" 
					style="width: 90px;font-size: 14px;height: 95%;line-height: 35px;"
					hover-class="is-hover" type="warn" v-if="orderList.status==0" @tap="$u.throttle(toPay, 500)">立即支付</button>
			</view>
		</view>
		<view :style="{height:windowsHeight-70+'px'}" class="good_order">
			 <u-list height="100%" width="100%">
				 <view class="sub_order_box">
					<u-cell v-for="good in orderList.dcGoodsList" :key="good.id"  :icon="imageHandle(good.imagine)" :value="good.num*good.price" :label="'×'+good.num"
						iconStyle="width: 50px;height: 50px;border-radius: 5px;" :border="false">
						<view class="sub_title" slot="title">
							{{good.name}}
						</view>
						<view class="price" slot="value">
							￥{{good.price}}
						</view>
					</u-cell>
					<u-cell title="桌号" :value="orderList.tableId+'号桌'"></u-cell>
					<u-cell title="总计" titleStyle="font-size: 20px;">
						<view style="font-size: 20px;" slot="value">￥{{orderList.amount}}</view>
					</u-cell>
				</view>
				<view class="sub_order_box" style="margin-top: 10px;margin-bottom: 80px;">

					<u-cell title="订单编号" :value="orderList.id" :border="false">
					</u-cell>
					<u-cell title="下单时间" :value="orderList.createTime" :border="false">
					</u-cell>
					<u-cell title="支付时间" :value="orderList.payTime" :border="false">
					</u-cell>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import {getOrderDetail,cancelOrder} from '@/config/api.js'
	import config from '@/config.js'
	export default {
		data() {
			return {
				windowsHeight: 0,
				orderList:{}
			}
		},
		methods: {
			imageHandle(imgSrc) {
				return config.baseURL + imgSrc + "";
			},
			toPay(){
				const order={"rmbtotal":this.orderList.amount,"orderId":this.orderList.id}
				uni.navigateTo({
					url:'/pages/pay/pay?order='+encodeURIComponent(JSON.stringify(order))
				})
			},
			toCancel(){
				cancelOrder(this.orderList.id).then((res)=>{
					if(res.code==200){
						this.$refs.uToast1.show({
							type: 'success',
							message: "取消订单成功",
							duration: "1000",
							complete(e){
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						})
					}else{
						this.$refs.uToast1.show({
							type: 'success',
							message: "取消订单失败",
							duration: "1000",
						})
					}
				})
			}
		},
		onLoad(option) {
			 const orderId = JSON.parse(decodeURIComponent(option.orderId));
			getOrderDetail(orderId).then((res)=>{
				this.orderList=res.data;
			})
			uni.getSystemInfo({
				success: (res) => {
					this.windowsHeight = res.windowHeight
				}
			})
		}
	}
</script>

<style lang="scss">
	.pg {
		background-color: #f4f4f4;
		width: 100%;
		height: 100%;
		.title {
			height: 70px;
			width: 95%;
			display: flex;
			margin: 0 auto;
			justify-content: space-between;
			.order_text{
				font-size: 23px;
			line-height: 70px;
			margin-right: 20px;
			}
			.pay{
				 width: 200px;
				height: 35px;
				display: flex;
				margin: auto 0;
			}
		}

		.content {
			width: 95%;
			// height: 300px;
			margin: 0 auto;
			background-color: white;
		}

		.sub_order_box {
			width: 95%;
			height: auto;
			background-color: white;
			margin: 0 auto;
			border-radius: 10px;
			.sub_title {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin-right: 20px;
			}

			.price {
				color: red;
			}
		}
	}
</style>